<template>
  <div class="tag-group">
    <div class="tag-group-header">
      <div class="header-text" >{{ headerText }}</div>
      <div class="header-btn" @click="onBtnClick">{{ btnText }}</div>
    </div>
    <div class="all-tag">
        <div class="all-tag-wrap" v-for="(text,index) in value" :key="index">
          <tag :text="text" @onTagClick="onTagClick(text,index)"></tag>
        </div>
    </div>
  </div>
</template>

<script>
  import Tag from './Tag.vue';
  export default {
    name: "TagGroup",
    props : {
      headerText : {
        type : String,
        default : '',
      },
      btnText : {
        type : String,
        default: '',
      },
      value : [],
    },
    computed : {

    },
    mounted(){

    },
    data(){
      return {

      }
    },
    methods : {
      onTagClick(text,index){ //标签点击事件
       this.$emit('onTagClick',text,index);
      },
      onBtnClick(){ //按钮点击事件
        this.$emit('onBtnClick');
      },
    },
    components : {
      Tag,
    }
  };
</script>

<style lang="less" scoped>
.tag-group{
  margin-top: 35px;
  padding: 0 16px;
  .tag-group-header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    .header-text{
      font-size: 14px;
      color: #333;
    }
    .header-btn{
      font-size: 14px;
      color: #3696EF;
    }
  }
  .all-tag{
    display: flex;
    flex-flow: row wrap;
    .all-tag-wrap{
      padding: 7.5px 7.5px 7.5px 0;
      max-width: 100%;
      box-sizing: border-box;
    }
  }
}
</style>
